<template>
  <section class="sections">
    <div class="content">
      <!-- 头部标题和描述 -->
      <div class="header-section">
        <h2 class="title1">迈德莫斯 健身服务</h2>
        <p class="description">
          以健身为中心，全面服务健身房及健身行业上下游合作伙伴。
        </p>
        <p class="description">
          帮助健身房智能升级，快速实现健身智能化，服务便捷化，运营高效化的智能转变。
        </p>
      </div>

      <!-- 健身行业模块 -->
      <el-row :gutter="20" class="industry-section">
        <el-col
          :xs="24"
          :sm="12"
          :md="6"
          v-for="(item, index) in industryItems"
          :key="index"
        >
          <el-card class="industry-card" shadow="hover">
            <img :src="item.image" alt="" class="industry-image" />
            <h3 class="title2">{{ item.title }}</h3>
            <p class="industry-description">{{ item.description }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue';

// 健身行业模块数据
const industryItems = ref([
  {
    image: '/static/images/Index/club.png',
    title: '健身俱乐部',
    description: '智能健身管理系统，帮助健身房提升管理服务效率，降低人力成本。'
  },
  {
    image: '/static/images/Index/sjgzs.png',
    title: '私教工作室',
    description: '强大的私教查课服务，让管理更高效，操作更简单。'
  },
  {
    image: '/static/images/Index/quanji.png',
    title: '舞蹈/瑜伽/拳击',
    description: '完美支撑以团操为主的运动场所，灵活的排课机制，大大提高了管理效率。'
  },
  {
    image: '/static/images/Index/cyl.png',
    title: '健身产业链',
    description: '全面支撑多样活动、营销方案、智能设备，多维度助力运营。'
  }
]);
</script>

<style scoped>
.sections {
  padding: 40px 20px;
  background-color: #f5f7fa;
}

.content {
  max-width: 1200px;
  margin: 0 auto;
}

.header-section {
  text-align: center;
  margin-bottom: 40px;
}

.title1 {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
}

.description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

.industry-section {
  margin-top: 40px;
}

.industry-card {
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.industry-card:hover {
  transform: translateY(-10px);
}

.industry-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
}

.title2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.industry-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}
</style>
